<template>
  <a-modal
    :title='title'
    :width='1000'
    :visible='visible'
    :destroyOnClose='true'
    :footer='true'
    @ok='submit'
    @cancel='handleCancel'
  >
    <a-row>
      <a-col :span='13'>
        <a-button v-if='queryParam.pc_id' style='margin-bottom: 10px' type='primary' @click='handleAdd'>增加跟进记录
        </a-button>
      </a-col>
      <a-col :span='11'>
        提交时间：
        <a-range-picker format='YYYY-MM-DD' v-model='queryParam.create_time' @change='handleRefresh(true)' />
      </a-col>
    </a-row>
    <s-table
      ref='table'
      rowKey='pcl_id'
      :loading='isLoading'
      :columns='columns'
      :data='loadData'
      :scroll='{y:500}'
      :pageSize='15'
    >
      <div slot='content' slot-scope='text, item'>
        1. 跟进内容：<span v-if='!item.content'>-</span>
        <a-tooltip v-else placement='top'>
          <template slot='title'>
            <span v-html='item.content'></span>
          </template>
          <a>{{ item.content.length <= 10 ? item.content : item.content.substr(0, 10) + '...' }}</a>
        </a-tooltip>
        <br>
        2. 记录下次跟进时间为：
        {{ item.next_time }}
        <br>
        3. 修改客户类型为：
        <a-tooltip v-if='item.type' placement='top'>
          <template slot='title'>
            <span>{{ item.type.type_desc }}</span>
          </template>
          <a-tag>{{ item.type.type_name }}</a-tag>
        </a-tooltip>
        <span v-else>-</span>
      </div>
      <div slot='status' slot-scope='text, item'>
        <a-tag v-if='text==0'>待下次跟进</a-tag>
        <a-tag v-if='text==1' color='blue'>已完成下次跟进</a-tag>
      </div>
      <div slot='create_time' slot-scope='text, item'>
        <template v-if=' !text'>-</template>
        <template v-else>{{ text }}</template>
      </div>
      <div class='actions' slot='action' slot-scope='text, item'>
        <a @click='handleShowKehe(item)'>查看对应客户</a>
        <!--        <a v-if='item.status==0' @click='handleComplete(item)'>完成下次跟进</a>-->
        <!--        <a @click='handleDelete(item)'>删除</a>-->
      </div>
    </s-table>
    <SaveForm :pcRecord='pcRecord' :pcId='queryParam.pc_id' ref='SaveForm' @handleSubmit='handleRefresh' />
  </a-modal>
</template>
<script>
import * as Api from '@/api/presales_customer/log'
import { STable } from '@/components'
import SaveForm from './modules/SaveForm.vue'
import moment from 'moment'

export default {
  name: 'LogModel',
  components: { STable, SaveForm },
  data() {
    return {
      title: '',
      visible: false,
      queryParam: {
        status: -1,
        pc_id: ''
      },
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 表格 loading
      isLoading: false,
      // 表格字段
      columns: [
        {
          title: '客户ID',
          width: 70,
          dataIndex: 'pc_id'
        },
        // {
        //   title: '状态',
        //   width: 130,
        //   dataIndex: 'status',
        //   scopedSlots: { customRender: 'status' }
        // },
        {
          title: '提交用户',
          align: 'center',
          width: 100,
          dataIndex: 'store_user.real_name'
        },
        {
          title: '本次跟进内容',
          dataIndex: 'content',
          width: 500,
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '本次提交时间',
          // width: 180,
          dataIndex: 'create_time',
          scopedSlots: { customRender: 'create_time' }
        }
        // {
        //   title: '下次跟进时间',
        //   width: 180,
        //   dataIndex: 'next_time',
        //   scopedSlots: { customRender: 'create_time' }
        // },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => {
            return response.data.list
          })
      },
      // 0销售 1会计 2外勤
      position: '',

      excelLoading: false,

      // 当前时间
      currDateTime: '',

      pcRecord: {}
    }
  },
  watch: {
    value(val) {
      this.sValue = val || null
    }
  },
  methods: {
    open(item = {}) {
      this.pcRecord = item
      this.title = this.queryParam.pc_id ? '客户ID' + this.queryParam.pc_id + '_跟进记录' : '我的跟进记录'
      this.visible = true
      this.currDateTime = moment().format('YYYY-MM-DD HH:mm:SS')
    },

    handleShowKehe(item) {
      this.visible = false
      this.$emit('handleSubmit', item.pc_id)
    },

    setRowClassName(record, index) {
      if (record.status == 0) {
        const c = moment().format('YYYY-MM-DD')
        const n = moment(record.next_time).format('YYYY-MM-DD')
        console.log(c, n)
        console.log(this.currDateTime, record.next_time)
        if (this.currDateTime > record.next_time) {
          return 'bg-red'
        } else if (c === n) {
          return 'bg-orange'
        }
      }
    },

    // 触发change事件
    submit(value) {
      this.$emit('change', value)
    },
    handleCancel() {
      this.visible = false
      this.$emit('handleSubmit')
    },
    // 新增记录
    handleAdd() {
      this.$refs.SaveForm.add()
    },

    // 编辑记录
    handleEdit(item) {
      this.$refs.SaveForm.edit(item)
    },
    // 删除记录
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ apiId: item['pcl_id'] })
            .then(result => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => modal.destroy())
        }
      })
    },
    handleComplete(item) {
      const app = this
      const modal = this.$confirm({
        title: '确定已完成当前跟进内容?',
        content: '此操作不可撤回',
        onOk() {
          return Api.edit({ apiId: item['pcl_id'], form: { status: 1 } })
            .then(result => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => modal.destroy())
        }
      })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    }
  }
}

</script>
<style scoped lang='less'>
::v-deep .bg-red {
  background-color: #f66565;
}

::v-deep .bg-orange {
  background-color: #f3c166;
}
</style>
